<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>TreeSelect 树选择</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value1_1" :tree-data="treeData1_1" show-search :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
			tree-default-expand-all tree-node-filter-prop="label" allow-clear placeholder="Please select" style="width: 100%">
			<template #title="{ value: val, label }">
				<b v-if="val === 'hankou'" style="color: #08c">{{label}}</b>
				<template v-else>{{ label }}</template>
			</template>
		</a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">可勾选</a-divider><!-- =============================================================== -->
	<p class="desc">使用勾选框实现多选功能。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value2_1" :tree-data="treeData1_1" style="width: 100%" tree-checkable allow-clear tree-default-expand-all
			:show-checked-strategy="SHOW_PARENT" placeholder="Please select" tree-node-filter-prop="label"></a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">异步加载</a-divider><!-- =============================================================== -->
	<p class="desc">异步加载树节点。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value3_1" :tree-data="treeData3_1" tree-data-simple-mode style="width: 100%"
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" :load-data="onLoadData3_1"></a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">线性样式</a-divider><!-- =============================================================== -->
	<p class="desc">通过 treeLine 配置线性样式。</p>
	<a-space direction="vertical">
		<a-switch v-model:checked="treeLine4" checkedchildren="treeLine" uncheckedchildren="treeLine"></a-switch>
		<a-switch v-model:checked="showLeafIcon4" :disabled="!treeLine4" checkedchildren="showLeafIcon" uncheckedchildren="showLeafIcon"></a-switch>
		<a-tree-select v-model:value="value4_1" :tree-data="treeData1_1" style="width: 300px" placeholder="Please select" show-search
			:tree-line="treeLine4 && { showLeafIcon: showLeafIcon4 }" tree-node-filter-prop="label">
			<template #title="{ value: val, label }">
				<b v-if="val === 'hankou'" style="color: #08c">{{ label }}</b>
				<template v-else>{{ label }}</template>
			</template>
		</a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义选择标签</a-divider><!-- =============================================================== -->
	<p class="desc">允许自定义选择标签的样式。仅支持多选模式，单选可直接使用 title 插槽</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value5_1" :tree-data="treeData5_1" show-search style="width: 100%" tree-default-expand-all tree-node-filter-prop="label"
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" allow-clear multiple :show-checked-strategy="SHOW_ALL">
			<template #tagRender="{ label, closable, onClose, option }">
				<a-tag :closable="closable" :color="option.color" style="margin-right: 3px" @close="onClose5">
					{{ label }}&nbsp;&nbsp;
				</a-tag>
			</template>
			<template #title="{ value: val, label }">
				<b v-if="val === 'hankou'" style="color: #08c">{{ label }}</b>
				<template v-else>{{ label }}</template>
			</template>
		</a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">弹出位置</a-divider><!-- =============================================================== -->
	<p class="desc">可以通过 placement 手动指定弹出的位置。</p>
	<a-space direction="vertical" style="width: 500px;margin-left: 300px;">
		<a-radio-group v-model:value="placement6">
			<a-radio-button value="topLeft">topLeft</a-radio-button>
			<a-radio-button value="topRight">topRight</a-radio-button>
			<a-radio-button value="bottomLeft">bottomLeft</a-radio-button>
			<a-radio-button value="bottomRight">bottomRight</a-radio-button>
		</a-radio-group>
		<a-tree-select v-model:value="value6_1" show-search allow-clear tree-default-expand-all :tree-data="treeData1_1" :placement="placement6"
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto', minWidth: '300px' }" placeholder="Please select"
			:dropdown-match-select-width="false" tree-node-filter-prop="label"></a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">多选</a-divider><!-- =============================================================== -->
	<p class="desc">多选的树选择。</p>
	<a-space direction="vertical" style="width: 500px;">
		<a-tree-select v-model:value="value7_1" :tree-data="treeData1_1" show-search style="width: 100%" :show-checked-strategy="SHOW_ALL" allow-clear multiple
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" tree-default-expand-all tree-node-filter-prop="label"></a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">后缀图标</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的用法。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value8_1" :tree-data="treeData3_1" show-search style="width: 100%"
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" allow-clear
			tree-default-expand-all :field-names="{children: 'children',value: 'value',label: 'title',}" tree-node-filter-prop="title">
			<template #suffixIcon>
				<Smile-Outlined class="ant-icon"></Smile-Outlined>
			</template>
		</a-tree-select>
		<a-tree-select v-model:value="value8_2" :tree-data="treeData3_1" show-search style="width: 100%"
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" allow-clear multiple show-arrow
			tree-default-expand-all :field-names="{children: 'children',value: 'value',label: 'title',}" tree-node-filter-prop="title">
			<template #suffixIcon>
				<Smile-Outlined class="ant-icon"></Smile-Outlined>
			</template>
		</a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">高亮</a-divider><!-- =============================================================== -->
	<p class="desc">搜索值高亮</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value9_1" :tree-data="treeData1_1" v-model:search-Value="searchValue9" show-search style="width: 100%" allow-clear
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" tree-default-expand-all tree-node-filter-prop="label"
			@search="onSearch9">
			<template #title="{ value: val, label }">
				<b v-if="val === 'hankou'" style="color: #08c">{{label}}</b>
				<template v-else>
					<template v-for="(fragment, i) in label.toString().split(new RegExp(`(?<=${searchValue9})|(?=${searchValue9})`, 'i'))">
						<span v-if="fragment.toLowerCase() === searchValue9.toLowerCase()" :key="i" style="color: #f88">
							{{ fragment }}
						</span>
						<template v-else>{{ fragment }}</template>
					</template>
				</template>
			</template>
		</a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">虚拟滚动</a-divider><!-- =============================================================== -->
	<p class="desc">使用 height 属性则切换为虚拟滚动。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value10_1" :tree-data="treeData10_1" style="width: 100%" tree-checkable tree-default-expand-all
			:show-checked-strategy="SHOW_PARENT" :height="233" :max-tag-count="10" tree-node-filter-prop="title" allow-clear>
			<template #title="{ title, value }">
				<span v-if="value === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
				<template v-else>{{ title }}</template>
			</template>
		</a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义字段</a-divider><!-- =============================================================== -->
	<p class="desc">fieldNames 替换 treeNode中 title,key,children 字段为treeData中对应的字段</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select v-model:value="value11_1" :tree-data="treeData3_1" :field-names="{children: 'children',label: 'title',value: 'value',}"
			:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="Please select" allow-clear
			tree-default-expand-all tree-node-filter-prop="title" show-search style="width: 100%"></a-tree-select>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">自定义状态</a-divider><!-- =============================================================== -->
	<p class="desc">使用 status 为 DatePicker 添加状态，可选 error 或者 warning。</p>
	<a-space direction="vertical" style="width: 500px">
		<a-tree-select status="error" style="width: 100%" placeholder="Error"></a-tree-select>
		<a-tree-select status="warning" style="width: 100%" multiple placeholder="Warning multiple"></a-tree-select>
	</a-space>
	
	
</div>
<div class="h100"></div>

</body>
<script>
function genTreeNode3(parentId, isLeaf=false){
	const random = Math.random().toString(36).substring(2, 6);
	return {
		id: random,
		pId: parentId,
		value: random,
		title: isLeaf ? 'Tree Node' : 'Expand to load',
		isLeaf,
	};
};

function dig10(path = null, level = 3) {
	const list = [];
	for (let i = 0; i < 10; i += 1) {
		const value = path === null ? `${i}` : `${path}-${i}`;
		const treeNode = {title: `${value}【${level}】`, value,};
		if (level > 1) {
			treeNode.children = dig10(value, level - 1);
		}
		list.push(treeNode);
	}
	return list;
}
// console.log(dig10());

const Main = {
data() {
return {
	value1_1: '',
	treeData1_1: [
		{	
			value: 'zhejiang',label: '浙江',
			children: [
				{
					value: 'hangzhou',label: '杭州',
					children: [
						{value: 'xihu',label: '西湖',code: 752100,},
					],
				},
			],
		},
		{
			value: 'jiangsu',label: 'Jiangsu',
			children: [
				{
					value: 'nanjing',label: 'Nanjing',
					children: [
						{value: 'zhonghuamen',label: 'Zhong Hua Men',code: 453400,},
					],
				},
			],
		},
		{
			value: 'hubei',label: '湖北',
			children: [
				{
					value: 'wuhan',label: '武汉',
					children: [
						{value: 'hankou',label: '汉口',},
						{value: 'hankou2',label: '2汉口2',},
						{value: 'wuchang',label: '武昌',},
						{value: 'yangluo',label: '阳逻',},
					],
				},
				{
					value: 'yichang',label: '宜昌',disabled: true,
					children: [
						{value: 'yiling',label: '夷陵',},
						{value: 'wujiagang',label: '伍家岗',},
					],
				},
			],
		},
	],
	
	SHOW_PARENT: antd.TreeSelect.SHOW_PARENT,
	value2_1: 'hankou',
	
	value3_1: '',
	treeData3_1: [
		{ id: 1, pId: 0, value: '1', title: 'Expand to load' },
		{ id: 2, pId: 0, value: '2', title: 'Expand to load' },
		{ id: 3, pId: 0, value: '3', title: '叶子节点', isLeaf: true },
	],
	
	treeLine4: true,
	showLeafIcon4: false,
	value4_1: '',
	
	value5_1: ['hubei', 'wuhan'],
	treeData5_1: [
		{
			value: 'hubei',label: '湖北', color: 'orange',
			children: [
				{
					value: 'wuhan',label: '武汉', color: 'red',
					children: [
						{value: 'hankou',label: '汉口', color: 'orange',},
					],
				},
				{value: 'yichang',label: '宜昌', color: 'orange', disabled: true,},
			],
		},
		{value: 'zhejiang',label: '浙江', color: 'green',},
	],
	SHOW_ALL: antd.TreeSelect.SHOW_ALL,
	
	placement6: 'topLeft',
	value6_1: null,
	
	value7_1: ['hankou'],
	
	value8_1: null,
	value8_2: [],
	
	value9_1: null,
	searchValue9: '',
	
	value10_1: ['0-0-0', '0-0-1'],
	treeData10_1: dig10(),
	
	value11_1: null,
	
}
},
methods:{
	onLoadData3_1(treeNode){
		return new Promise(resolve => {
			const { id } = treeNode.dataRef;
			setTimeout(() => {
				this.treeData3_1 = this.treeData3_1.concat([
					genTreeNode3(id, false),
					genTreeNode3(id, true),
					genTreeNode3(id, true),
				]);
				console.log(this.treeData3_1);
				resolve(true);
			}, 500);
		});
	},
	onClose5(e){
		console.log('onClose5', e);
	},
	onSearch9(value){
		console.log('onSearch9', value, this.searchValue9);
	}
	
	
},
watch: {
	value1_1: function(val){
		console.log(val);
	},
	value2_1: function(val){
		console.log(val);
	},
	value3_1: function(val){
		console.log(val);
	},
	value4_1: function(val){
		console.log(val);
	},
	value5_1: function(val){
		console.log(val);
	},
	value6_1: function(val){
		console.log(val);
	},
	value7_1: function(val){
		console.log(val);
	},
	value8_1: function(val){
		console.log(val);
	},
	value8_2: function(val){
		console.log(val);
	},
	value9_1: function(val){
		console.log(val);
	},
	value10_1: function(val){
		console.log(val);
	},
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
